<template>
  <!-- 筛选区 -->
  <div class="sub-filter" v-if="filterData">
    <div class="item">
      <div class="head">品牌：</div>
      <div class="body">
        <a href="javascript:;" @click="changeBrands(item.id)"
          :class="{ active: item.id === filterData.brands.selectedBrand }" v-for="item in filterData.brands"
          :key="item.id">{{ item.name }}</a>
      </div>
    </div>
    <div class="item" v-for="item in filterData.saleProperties" :key="item.id">
      <div class="head">{{ item.name }}：</div>
      <div class="body">
        <a href="javascript:;" @click="changeProp(item, prop.id)"
          :class="{ active: prop.id === item.properties.selectedAttr }" v-for="prop in item.properties"
          :key="prop.id">{{ prop.name }}</a>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { findSubCategoryFilte } from '@/api/category'
export default {
  name: 'SubFilter',
  setup(props,{emit}) {
    const filterData = ref(null)
    const route = useRoute()
    //使用watch监听地址栏的Id变化发起相应的筛选数据请求
    watch(() => route.params.id, (newValue) => {
      if (newValue && `/category/sub/${newValue}` === route.path) {
        findSubCategoryFilte(newValue).then((data) => {
          //处理数据 为每一组数据添加 ’全部‘ 数据
          // 1.为品牌添加 全部属性以及记录点击属性
          data.result.brands.unshift({ id: null, name: '全部' })
          data.result.brands.selectedBrand = null
          // 2.为每个属性添加 全部属性以及记录点击属性
          data.result.saleProperties.forEach(item => {
            item.properties.unshift({ id: null, name: '全部' })
            item.properties.selectedAttr = null
          })
          // 获取修改后的数据
          filterData.value = data.result
        })
      }
    }, { immediate: true })
    // 整理获取筛选参数对象 {brandId:'',attrs:[{groupName:'',propertyName:''},....]}
    const getFilterParams = () => {
      const filterParams = { brandId:'', attrs: [] }
      //品牌
      filterParams.brandId = filterData.value.brands.selectedBrand
      
      //商品属性
      filterData.value.saleProperties.forEach(item => {
        if (item.properties.selectedAttr) {
          const prop = item.properties.find(prop => prop.id == item.properties.selectedAttr)
          filterParams.attrs.push({ groupName: item.name, propertyName: prop.name })
        }
      })
      return filterParams
    }

    //1.记录选择的品牌
    const changeBrands = (value) => {
      if (filterData.value.brands.selectedBrand == value) return
      filterData.value.brands.selectedBrand = value
      emit('filter-change',getFilterParams())
    }
    //2.记录选择的属性
    const changeProp = (item, value) => {
      if (item.properties.selectedAttr == value) return
      item.properties.selectedAttr = value
      emit('filter-change',getFilterParams())
    }
    return {
      filterData,
      changeBrands,
      changeProp
    }
  }
}
</script>
<style scoped lang='less'>
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;

  .item {
    display: flex;
    line-height: 40px;

    .head {
      width: 80px;
      color: #999;
    }

    .body {
      flex: 1;

      a {
        margin-right: 36px;
        transition: all .3s;
        display: inline-block;

        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
}
</style>